<template>
  <view class="box-bg">
    <uni-nav-bar 
      shadow 
      color="#F7F7F7" 
      left-icon="left" 
      backgroundColor="#3485FD" 
      height="65px" 
      title="选择车辆" 
      @clickLeft="back" 
    />
  </view>
  <view class="main1"></view>
  <view class="main2">
    <!-- 动态渲染所有车辆，使用唯一ID作为key -->
    <block v-for="car in cars" :key="car.id">
      <uni-card class="main2-card">
        <view class="car-view">
          <view class="cars">
            <image class="img" :src="car.avatar" mode=""></image>
            <view class="car">
              <view class="car-name">车型：{{ car.model }}</view>
              <view class="car-type">车牌：{{ car.plate }}</view>
            </view>
          </view>
          <view class="yuan-view">
            <!-- 根据车辆选中状态动态显示图片 -->
            <image 
              class="yuan" 
              :src="car.isSelected ? '/static/yuan5.png' : '/static/yuan4.png'" 
              mode="" 
              @click="toggleCarSelection(car.id)" 
            />
          </view>
        </view>
      </uni-card>
    </block>
  </view>
  <view class="but" @click="addNewCar">
    <image class="but-img" src="/static/xuanze.png" mode=""></image>
    <view class="but-text">
      <image class="jia" src="/static/jiahao.png" mode=""></image>
      <text>添加车辆</text>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue';

// 车辆数据 - 可以扩展任意数量的车辆
const cars = ref([
  {
    id: 1,
    avatar: '/static/liuying.jpg',
    model: '奔驰-GR',
    plate: '豫M35468',
    isSelected: false // 每辆车独立维护选中状态
  },
  {
    id: 2,
    avatar: '/static/liuying.jpg',
    model: '宝马-X5',
    plate: '豫A87654',
    isSelected: false
  },
  {
    id: 3,
    avatar: '/static/liuying.jpg',
    model: '奥迪-A6',
    plate: '豫C12345',
    isSelected: false
  },
  {
    id: 4,
    avatar: '/static/liuying.jpg',
    model: '特斯拉-M3',
    plate: '豫D98765',
    isSelected: false
  }
  // 可继续添加更多车辆...
]);

// 返回上一页
const back = () => {
  uni.navigateBack();
};

// 切换车辆选中状态
const toggleCarSelection = (carId) => {
  // 找到对应ID的车辆并更新选中状态
  const carIndex = cars.value.findIndex(car => car.id === carId);
  if (carIndex !== -1) {
    // 使用展开语法创建新对象，确保响应式更新
    cars.value[carIndex] = {
      ...cars.value[carIndex],
      isSelected: !cars.value[carIndex].isSelected
    };
  }
};

// 添加新车（示例功能）
const addNewCar = () => {
  const newCar = {
    id: Date.now(), // 使用时间戳作为唯一ID
    avatar: '/static/liuying.jpg',
    model: '新车',
    plate: '新牌号',
    isSelected: false
  };
  
  cars.value.push(newCar);
  
  // 可选：添加后滚动到新车辆位置
  nextTick(() => {
    uni.pageScrollTo({
      scrollTop: 10000, // 滚动到底部
      duration: 300
    });
  });
};

// 获取已选中的车辆
const getSelectedCars = () => {
  return cars.value.filter(car => car.isSelected);
};
</script>

<style>
	.box-bg{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}
	.main1{
		background-color: #1168EA;
		padding: 25rpx;
		padding-bottom: 140rpx;
		margin-top: 115rpx;
		height: 150rpx;
	}
	.main2{
		position: relative;
		top: -300rpx;
	}
	.car-view,.cars,.but-text{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.car-view{
		padding: 25rpx 0 25rpx 0;
	}
	.cars{
		width: 90%;
	}
	.img{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
	}
	.yuan{
		width: 35rpx;
		height: 35rpx;
	}
	.car{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100rpx;
	}
	.car-name{
		font-size: 33rpx;
		font-weight: 600;
		width: 400rpx
	}
	.car-type{
		font-size: 27rpx
	}
	.but{
		width: 100%;
		margin: auto;
		position: fixed;
		top: 1520rpx;
	}
	.but-img{
		height: 70rpx;
		width: 90%;
		margin-left: 5%;
	}
	.but-text{
		width: 22%;
		position: absolute;
		top: 12rpx;
		left: 39%;
	}
	.jia{
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-top: 6rpx;
	}
	text{
		color: white;
		font-size: 30rpx;
	}
</style>